<mat-card class="overview-card" >

  
    <mat-card-header>
      <button mat-button class="refresh-btn" (click) = "refresh()"><mat-icon>refresh</mat-icon></button>
      <h3>Patient Overview</h3>
    </mat-card-header>
    
    <mat-card-content>
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search...">
        </mat-form-field>
          
          <div class="mat-elevation-z8">
            <table mat-table [dataSource]="dataSource" matSort>
          
              <!-- Dynamic columns -->
              <ng-container *ngFor="let col of displayedColumns; let colIndex = index">
                <ng-container [matColumnDef]="col">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{col}} </th>
                  <td mat-cell *matCellDef="let row"> {{row[col]}} </td>
                </ng-container>
              </ng-container>
  
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          
            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
          </div>
          
    </mat-card-content>
  
</mat-card>